<!--预约详情-->
<template> 
  <div class="contain">
    <app-header></app-header>
    <div class="dt-head">
      <div class="dt-head-fix">
        <detail-header :id="todolist"></detail-header>
        <!--tab-->
        <div class="lltab mb10 ft14">
          <tab bar-active-color="#77babd" 
               defaultColor="#333333"
               active-color="#77babd"
               :line-width='2'>
            <tab-item selected 
              @on-item-click="tab=true">商品信息</tab-item>
            <tab-item 
              @on-item-click="tab=false">订单反馈</tab-item>
          </tab>
        </div>
      </div>
    </div>
  
    <div class="detail-tab-lft" v-if="tab">
      <div class="detail-supply">
        <i class="iconfont icon-supplier ft17"></i>
        {{todolist.SupplierName}}
      </div>
      <div class="detail-fedbck df-body-nopad" v-if="tododetail.length == 0">
        <voice-msg :id="todolist"></voice-msg>
      </div>

      <div class="detail-goods-list">
        <div class="displayflex list-goods-warp" v-for="item in tododetail">
          <div class="pic">
            <img :src="item.PictContent | filterImgUrl">
          </div>
          <div class="msg flex1">
            <p class="ft17">{{item.SupplierGoodsName}}</p>
            <p>{{item.SupplierGoodsSpec}}</p>
            <p>{{item.Producer}}</p>
            <em class="def-color">共<span class="red">{{item.SupplierPoQty}}</span>{{item.SupplierUnit}}</em>
          </div>
        </div>
        <p class="detail-mark ft17" v-if="todolist.Memo"><em class="ft17">备注留言：</em><i class="gray">{{todolist.Memo}}</i></p>
        <div class="detail-num">
          <em v-if="todolist.CountSum>0">共{{todolist.CountSum}}种商品</em>小计:<span class="red">￥{{(amount || todolist.DetailSum) | fmoney}}</span>
        </div>
      </div>
    </div>
    <template v-if="!tab">
      <feed-back :guid="todolist.Guid" :billno='todolist.BillNo'></feed-back>
    </template>
  </div>
</template>

<script>
import detailHeader from "@/components/core/header/detail_header.vue";
import feedBack from "@/components/share/billfb/billfb.vue";
import voiceMsg from "@/components/share/voiceMsg/voicemsg.vue";
import appHeader from '@/components/core/header/app_header.vue';
export default {
  name: "acceptDetail",
  components: {
    detailHeader,
    feedBack,
    voiceMsg,
    appHeader
  },
  data() {
    return {
      tab: true,
      tododetail: [],
      todolist: [],
      popupVisible: false,
      Thbilldata: []
    };
  },
  computed: {
    amount() {
      var total = 0;
      for (var i = 0; i < this.tododetail.length; i++) {
        total = total + this.tododetail[i].Amount;
      }
      return total;
    },
    guid() {
      return this.$route.query.id;
    },
    userinfo() {
      return JSON.parse(localStorage.userinfo);
    }
  },
  created() {
    this.getDate();
  },
  mounted() {
    this.$nextTick(function() {});
  },
  methods: {
    //获取详情
    getDate() {
      var self = this;
      var query = {
        Guid: this.guid
      };
      this.Ajax.post("SearchOrderDetailGuid", query).then(function(resp) {
        self.tododetail = resp.Datas;
      });
      this.Ajax.post("SearchOrderGuidNew", query).then(function(resp) {
        self.todolist = resp.Data;
        self.getTHbill(self.todolist.BillNo);
      });
    },
    getTHbill(billno) {
      var self = this;
      var userinfo = JSON.parse(localStorage.userinfo);
      var query = {
        BillNo: billno,
        TenantGuid: userinfo.TenantGUID,
        CorpGuid: userinfo.CorpGuid
      };
      this.Ajax.post("SearchTrsupplymeddo", query).then(function(resp) {
        self.Thbilldata = resp.Data;
      });
    }
  }
};
</script>